import { Empty, Spin } from 'antd';
import { IAuthRoleContentView } from '../../type';
import cls from 'classnames';
import { useCallback, useContext, useEffect, useState } from 'react';
import { AuthorizationContext } from '../AuthHooks';
import { AuthFirstSteps } from './AuthFirstSteps';
import { AuthSecondSteps } from './AuthSecondSteps';
import { AuthThreeSteps } from './AuthThreeSteps';

export const AuthRoleContentView: React.FC<IAuthRoleContentView> = ({
  infoLoading,
}) => {
  const {
    prefixCls,
    stepsIndex,
    leftSelectKeys,
    leftTreeCheckRows,
    roleAuthDetailInfo,
    threeSaveIdList,
  } = useContext(AuthorizationContext); //获取 上下文

  const [firstCheckID, useFirstCheckID] = useState<any>();
  const [firstCheckRows, useFirstCheckRows] = useState<any>();
  const saveFirst = useCallback(
    (ids: any, rows: any) => {
      useFirstCheckID(ids);
      useFirstCheckRows(rows);
    },
    [firstCheckID, firstCheckRows],
  );

  useEffect(() => {
    if (stepsIndex == 1) {
      saveFirst(leftSelectKeys, leftTreeCheckRows);
    }
  }, [stepsIndex]);

  const [saveThreeIds, setSaveThreeIds] = useState<any>(null);
  const setSaveSenond = useCallback(
    (idList: any) => {
      setSaveThreeIds(idList);
    },
    [saveThreeIds],
  );

  useEffect(() => {
    let defaultIDS: any = [];
    if (roleAuthDetailInfo?.id && roleAuthDetailInfo?.paramObject) {
      roleAuthDetailInfo?.paramObject?.handle?.map((item: any) => {
        defaultIDS?.push(item?.id);
      });
    }
    if (threeSaveIdList) {
      setSaveSenond(threeSaveIdList);
    } else {
      setSaveSenond(defaultIDS);
    }
  }, [roleAuthDetailInfo?.id]);

  return (
    <>
      <div className={cls(prefixCls + 'role-ColContent')}>
        <div className={cls(prefixCls + 'divBox')}>
          {!infoLoading ? (
            <>
              {stepsIndex == 0 && (
                <AuthFirstSteps
                  stepType={'roleMenu'}
                  firstCheckID={firstCheckID}
                  firstCheckRows={firstCheckRows}
                />
              )}

              {stepsIndex == 1 && (
                <AuthSecondSteps leftTreeData={firstCheckRows} />
              )}

              {stepsIndex == 2 && (
                <AuthThreeSteps leftTreeData={firstCheckRows} />
              )}
            </>
          ) : (
            <>
              <Spin spinning={true}>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </Spin>
            </>
          )}
        </div>
      </div>
    </>
  );
};
